<template>
	<view class="">
		<!-- 头部内容 -->
		<u-sticky>
			<view class="dingbu">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class="xiaobai sanshier fonweight">
						智慧太阳能
					</view>
					<view class="margin_top5 flexbetween">
						<view class="soubobox flexleft">
							<view class="margin_right2">
								<u-icon name="search" color="#BABABA" size="28"></u-icon>
							</view>
							<input type="text" placeholder="设备名称" v-model="keywords" confirm-type="search" @confirm="init">
						</view>
						<view class="jiah" @click="tztj">
							<image src="../../static/image/system/jia.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 内容 -->
		<view class="block mainpadding">
			<view class="tab_nav">
				<view class="navTitle" v-for="(item,index) in navList" :key="index">
					<view :class="{'active':isActive === item.index}" @click="checked(item.index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="flexcenter" v-if="list.data.length==0">
				<view class="placeholderimage" style="margin-top: 200rpx;"></view>
			</view>
			<view class="ffffff radius margin_top mainpadding flexbetween" v-for="item in list.data" :key="item.id" @click="tzckxq(item.id)">
				<view class="flexleft">
					<view class="icon margin_right3">
						<image src="../../static/image/system/tyn.png" mode=""></image>
					</view>
					<view class="titletext xiaohei">{{item.userset_name}}</view>
				</view>
				<!-- 在线 -->
				<view class="flexright" v-if="item.status==1">
					<image class="zxicon margin_right1" src="../../static/image/system/zx.png" mode=""></image>
					<view class="xiaolv ershiba">在线</view>
				</view>
				<!--离线 -->
				<view class="flexright" v-if="item.status==0">
					<image class="zxicon margin_right1" src="../../static/image/system/lx.png" mode=""></image>
					<view class="xiaofen ershiba">离线</view>
				</view>
			</view>
		</view>
		<tabbardi :current="0"></tabbardi>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				menutop: 0,
				isActive: -1,
				navList: [{
					index: -1,
					title: '全部状态'
				}, {
					index: 1,
					title: "在线设备"
				}, {
					index: 0,
					title: "离线设备"
				}],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				keywords:""
			}
		},
		onLoad() {
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			
		},
		onShow() {
			this.init()
			
		},
		onPullDownRefresh() {
			this.init()
		},
		methods: {
			init(isPage, page) {
				if (!httpRequest.checkIsLogin()) return false
				// uni.showLoading({
				// 	mask:true,
				// 	title:"请稍后"
				// })
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					status:this.isActive,
					keywords:this.keywords,
				}
				let url = '/api/sbcl/sbIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					
					uni.hideLoading()
					if (res.code == 1) {
						let resList = res.data.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = resList
							_this.list.data = resList.data;
						}
						this.$forceUpdate()
					}
					this.navList[0].title = "全部设备("+res.data.total_num+")"
					this.navList[1].title = "在线设备("+res.data.total_num1+")"
					this.navList[2].title = "离线设备("+res.data.total_num0+")"
					uni.stopPullDownRefresh()
				}).catch(err=>{
					// uni.hideLoading()
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 跳转查看详情
			tzckxq(id) {
				uni.navigateTo({
					url: '/pages/index/shebeixiangxxx?id='+id
				})
			},
			// 跳转添加设备
			tztj() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/index/tianjiasb'
				})
			},
			checked(index) {
				this.isActive = index
				this.init()
				this.list = {
					data:[]
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zxicon {
		width: 18rpx;
		height: 18rpx;
	}

	.icon {
		width: 68rpx;
		height: 68rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		image {
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			width: 100%;
			height: 100%;
		}
	}

	.tab_nav {
		// background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 11rpx;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #999999;
	}

	.active {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 158rpx;
		height: 6rpx;
		background-size: 100% 100%;
		background: linear-gradient(90deg, #FF8000 0%, rgba(255, 128, 0, 0) 100%);
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		left: 0rpx;
		right: 0rpx;
		bottom: 10rpx;
		margin: auto;
	}

	.block {
		background: #FAFAFA;
		height: calc(100vh - 375rpx);
	}

	.jiah {
		width: 78rpx;
		height: 78rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.soubobox {
		width: 73%;
		border-radius: 65rpx 65rpx 65rpx 65rpx;
		border: 1rpx solid #FFFFFF;
		background-color: #fff;
		padding: 15rpx 40rpx;
	}

	.dingbu {
		padding: 0 30rpx 30rpx;
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
		background-image: url('../../static/image/system/sytb.png');
	}
</style>